<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>信息列表</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../layui/layui.js"></script>
		<script src="../js/jquery3.5.1.js"></script>
		<link href="../layui/css/layui.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/recover.css" />
	</head>
	<body>
		<div id="app">
			<div id="listbox">
				<!--消息列表-->
				<div class="listuser" v-for="inform in informList">
					<img class="user" :src="inform.buserinfo.headImg" width="60px" height="60px"/>
					<div class="messagetitle"><strong>{{inform.buserinfo.userName}}</strong>&nbsp;&nbsp;<span class="titlespan"><a href="#">在评论中@了我</a></span>
						<div class="titlespan thisconmment" style="color: white;margin-top: 6px;">
							
						</div>
						<div class="titletime">{{inform.informTime}}
							<span>&nbsp;</span>
							<i class="layui-icon layui-icon-reply-fill" style="font-size: 12px; color:#cccccf;" :onclick="'showRequest('+inform.id+')'">回复</i>  &nbsp;
						</div>
					</div>
					<div class="content">
						<img :src="inform.worksCover"/>
					</div>
					<div class="recover" :id="'recover'+inform.id" style="display: none;"> 
						<img class="recoveruser" :src="inform.userinfo.headImg" width="60px" height="60px"/>
						<textarea placeholder="请自觉遵守互联网相关政策,严禁发布色情,暴力,反动的言论" class="recoverinput"></textarea>
						<button class="sendreview" @click="sendCommenttable(inform)">发表评论</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				informList:[]
			},methods:{
				sendCommenttable(inform){
					inform.informContent=document.querySelector("#recover"+inform.id+" textarea").value
					console.log(inform.commentId)
					axios.post('http://localhost:8080/doubi/requestInform',inform).then(response => {
						if(response.data=="发送成功！"){
							this.$message({
								  message: response.data,
								  type: 'success'
							});
							document.querySelector("#recover"+inform.id+" textarea").value="";
						}else{
							this.$message.error(response.data);
						}
					}).catch(error => {
						console.error(error);
					});
				}
			},
			mounted() {
				this.informList=JSON.parse(localStorage.getItem("informList"))
				localStorage.setItem("hhhTest",JSON.stringify(this.informList))
			}
		})
	</script>
	<script type="text/javascript">
		function showRequest(id){
			//展示回复框
			var box=document.getElementById("recover"+id);
			if(box.getAttribute("style","display")=="display: none;"){
				box.style.display="block";
			}else{
				box.style.display="none";
			}
			
		}
	
		$(function(){
			var informList=JSON.parse(localStorage.getItem("hhhTest"))
			var startIndex=0;
			var endIndex=0;
			var normalText='';
			var atText='';
			var atNum=0;//@数量
			for(var i=0;i<informList.length;i++){
				atText=informList[i].informContent;//起始字符串
				//首先获得当前这一个@中，@字符出现的次数
				var indexx=informList[i].informContent.indexOf("@");//@第一次出现位置
				while(indexx !== -1){//不等于-1说明@存在
					atNum++;//@数量+1
					indexx=informList[i].informContent.indexOf("@",indexx+1);//查询下一个@出现下标
				}
				//循环拼接文本内容
				for(var j=0;j<atNum;j++){
					if(j==0 || atText.indexOf("@")!=-1){
						endIndex=atText.indexOf("@");
					}else{
						endIndex=atText.length
					}
					console.log(atText)
					if(atText.indexOf("@")!=0){//说明不是开头
						normalText=atText.slice(startIndex,endIndex);//普通文字
						var b=document.getElementsByClassName("thisconmment")[i]
						b.append(normalText);//拼接上普通文字
						//结束下标变成开始下标
						startIndex=endIndex;
						atText=atText.slice(endIndex)
						if(atText.length!=0){
							atNum++;
						}
					}else if(atText.indexOf("@")==-1){
						break;
					}else{//说明是开头 拼接@
						var a= document.createElement("a");
						a.setAttribute("class","usera")
						a.innerHTML=(atText.slice(0,atText.indexOf(" ")+1));
						var b=document.getElementsByClassName("thisconmment")[i]
						b.append(a);//拼接@4
						endIndex=atText.indexOf(" ")+1
						//结束下标变成开始下标
						startIndex=0;
						atText=atText.slice(endIndex)
						if(atText.length!=0){
							atNum++;
						}
					}
				}
			}
		})
	</script>
</html>
